<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title></title>
	<link rel="icon" href="favicon.ico" type="image/ico">
	<link href="../../css/bootstrap.min.css" rel="stylesheet">
	<link href="../../css/materialdesignicons.min.css" rel="stylesheet">
	<link href="../../css/style.min.css" rel="stylesheet">
	<script type="text/javascript" src="../../js/perfect-scrollbar.min.js"></script>
	<!-- 引入ElementUI样式 -->
	<link rel="stylesheet" href="../../css/elmentui.css" />
	<!-- 引入vue的库，一定要在elmentui的库文件之前 -->
	<script src="../../js/vue.js"></script>
	<!-- 引入axios网络请求库，完成后台异步请求的http通信，代替ajax请求（也可以使用） -->
	<script src="../../js/axios.min.js"></script>
	<!-- 引入ElementUI组件库 -->
	<script src="../../js/elmentui.js"></script>
	<!-- 引入qs库，处理url参数；qs.parse 方法可以把一段格式化的字符串转换为对象格式，
    qs.stringify 则和 qs.parse 相反，是把一个参数对象格式化为一个字符串。 -->
	<script src="../../js/qs.min.js"></script>
</head>
<body>
<div id="userInfoDiv" style="width: 80%;margin: 0px auto;">
	<!-- 条件查询部分 -->
	<el-form :inline="true" :model="userBeanFrom" class="demo-form-inline">
		<el-form-item label="用户名">
			<el-input v-model="userBeanFrom.username" placeholder="请输入用户名"></el-input>
		</el-form-item>
		<el-form-item label="年龄">
			<el-input v-model="userBeanFrom.userage" placeholder="请输入年龄"></el-input>
		</el-form-item>
		<el-form-item label="地址">
			<el-input v-model="userBeanFrom.useraddress" placeholder="请输入地址"></el-input>
		</el-form-item>

		<el-row>
			<el-form-item>
				<el-button type="primary" @click="doquery(1)">查询</el-button>
			</el-form-item>
			<el-form-item>
				<el-button type="warning" @click="clearFrom()">重置</el-button>
			</el-form-item>
			<el-form-item>
				<el-button type="success" @click="addUserInfo()">新增</el-button>
			</el-form-item>
		</el-row>
	</el-form>
	<!-- 条件查询结束 -->
	<!-- 查询结果集显示部分 -->
	<!-- data属性绑定的是vue组件中的数据结果集，如果data中绑定的数据发生变化
     则table会自动进行更新（由vue的数据的双向绑定功能实现的）-->
	<el-row>
		<el-table
				ref="multipleTable"
				:data="lstUserInfo"
				tooltip-effect="dark"
				style="width: 100%"
				@selection-change="handleSelectionChange">
			<el-table-column
					type="selection"
					width="55">
			</el-table-column>
			<el-table-column
					prop="username"
					label="姓名"
					width="120">
			</el-table-column>
			<el-table-column
					prop="userpwd"
					label="密码"
					width="120">
			</el-table-column>
			<el-table-column
					prop="userage"
					label="年龄"
					width="120">
			</el-table-column>
			<el-table-column
					prop="useraddress"
					label="地址"
					show-overflow-tooltip>
			</el-table-column>
			<el-table-column
					fixed="right"
					label="操作"
					width="100">
				<!-- 使用 template 模板的  slot-scope="scope" 表示，scope将获取table
                绑定的数据源中对应的当前行的数据对象
                可以通过scope.row.data 获取当前行的数据对象并传递给响应事件函数
                通过scope solt可以获取到 row colunm 的数据
                -->
				<template slot-scope="scope">
					<el-button @click="editClick(scope.row)" type="text" size="small">编辑</el-button>
					<el-button type="text" @click="deleteClick(scope.row.id)" size="small">删除</el-button>
				</template>
			</el-table-column>


		</el-table>
		<!-- <div style="margin-top: 20px">
          <el-button @click="toggleSelection()">批量删除</el-button>
        </div> -->
		<!-- 分页处理 （使用pagehelper进行物理分页）
        handleSizeChange方法：用于处理页码改变时响应的方法
        handleCurrentChange方法：处理每页记录条数改变时的影响
        -->


		<el-col :span="18">
			<el-pagination
					@size-change="handleSizeChange"
					@current-change="handleCurrentChange"
					:current-page="currentPage"
					:page-sizes="[2, 3, 5, 10]"
					:page-size="pageSize"
					layout="total, sizes, prev, pager, next, jumper"
					:total="total">
			</el-pagination>
		</el-col>


	</el-row>

	<!-- 列表表格回显数据结束 -->
	<!-- 新增模态框部分开始 elmentui要求dialog单独放置 -->
	<el-dialog
			title="提示"
			:visible.sync="dialogVisible"
			width="60%"
			:before-close="handleClose">
		<!-- 可以任意方式模态框中的内容 -->
		<el-form ref="editFromData" :model="editFromData" label-width="80px" :rules="rules">
			<el-form-item label="用户名" prop="username">
				<el-input v-model="editFromData.username" placeholder="请输入用户名"></el-input>
			</el-form-item>
			<el-form-item label="密码" prop="userpwd">
				<el-input v-model="editFromData.userpwd" placeholder="请输入密码"></el-input>
			</el-form-item>
			<el-form-item label="年龄" prop="userage">
				<el-input v-model="editFromData.userage" placeholder="请输入年龄"></el-input>
			</el-form-item>
			<el-form-item label="地址" prop="useraddress">
				<el-input v-model="editFromData.useraddress" placeholder="请输入地址"></el-input>
			</el-form-item>

		</el-form>
		<span slot="footer" class="dialog-footer">
			    <el-button @click="dialogVisible = false">取 消</el-button>
			    <el-button type="primary" @click="saveUserInfo('editFromData')">确 定</el-button>
			  </span>
	</el-dialog>

	<!-- 新增模态框部分结束 -->

</div>
<script type="text/javascript">
	var userInfoDiv=new Vue({
		el:"#userInfoDiv",
		data:{
			userBeanFrom:{
				username:"",
				userage:"",
				useraddress:""
			},
			// table表格绑定的数据结果集【数组和list的集合】
			// lstUserInfo 和table显示的数据列表绑定
			lstUserInfo:[],
			// 选中框，多选框-存储表格左侧数据行的多选选定的记录的id到一个数组数据结构中
			multipleSelection: [],
			dialogVisible:false,
			// dialog修改或新增对话框的数据结构
			editFromData:{
				userid:null,//默认值为null，用于区别新增还是修改方法
				username:"",
				userage:"",
				userpwd:"",
				useraddress:""

			},
			// 新增或者修改时form表单的验证规则
			rules:{
				// 表单username属性，中括号内的是验证规则的配置
				username: [
					{ required: true, message: '请输入请输入姓名', trigger: 'blur' }
				]

			},
			////////////分页信息相关////////////////
			// 当前页
			currentPage:1,
			// 分页大小
			pageSize:5,
			// 总记录条数
			total:0,


		},
		// 是在页面加载完成后执行的方法
		mounted:function(){
			console.log("我已经加载完毕")
			this.doquery(1,5)

		},
		methods:{

			doquery:function(currentIndex,currentPageSize){
				console.log(this.userBeanFrom)
				console.log(currentIndex)
				console.log(currentPageSize)
				// 如果currentPageSize参数没有指定，则走默认情况下的pageSize的值
				if(!currentPageSize){
					currentPageSize=this.pageSize
				}
				// 将当前的this对象保存起来，方便之后进行使用
				var that =this;
				// 查询条件的参数拼接
				let req_data=Qs.stringify(this.userBeanFrom);
				// 分页信息参数拼接
				let strPageHelperParams="&pageNum="+currentIndex+"&pageSize="+currentPageSize;
				req_data+=strPageHelperParams;
				console.log(req_data)
				// 使用axios网络请求库，进行同服务器异步通信,查询用户信息
				axios.post('http://localhost:8086/dzrg0112_springboot_vue_elementui_server/getInfoMationByPageHelper',req_data).then(function(response){
					console.log(response.data);
					// 更新了vue的table中的lstUserInfo
					// 将查询结果集动态映射在表格中显示
					that.lstUserInfo=response.data.list;
					// 数据查询完成之后，将分页相关的信息数据，绑定给分页插件的数据结果集
					that.total=response.data.total;
					that.pageSize=currentPageSize
					// if(response.data!=null&&response.data=='ok'){
					//  console.log("登录成功")
					//  window.location.href="index.html"
					// }
				}).catch(function(error){
					console.log(error)
				})

			},
			// 重置表单数据
			clearFrom:function(){
				// 将表单数据清空
				this.userBeanFrom.username="";
				this.userBeanFrom.useraddress=""
				this.userBeanFrom.userage=""
				// 重新查新
				this.doquery();

			},
			// 新增操作-弹出模态框
			addUserInfo:function(){
				// 设置dialog的dialogVisible属性，为true表示现实，false表示隐藏
				this.dialogVisible=true;
				// 将dialog中绑定的数据设置为空，进行新增操作
				this.editFromData={
					userid:null,//默认值为null，用于区别新增还是修改方法
					username:"",
					userage:"",
					userpwd:"",
					useraddress:""

				};


			},
			// 进行编辑操作-弹出dialog对话框
			editClick:function(rowData){
				// 进行设置dialog的dialogVisible属性，动态显示模态框
				this.dialogVisible=true;
				console.log(rowData)
				// 进行表单信息回显赋值操作，
				// this.editFromData=rowData;
				// Object.assign 方法可以从scope.row传递过来的对象中提取数据
				this.editFromData=Object.assign({},rowData);
			},

			deleteClick:function(userId){
				console.log(userId)
				// 将当前的this对象保存起来，方便之后进行使用
				var that =this;
				// 使用弹出框，确认用户是否进行删除操作
				this.$confirm('此操作将永久删除该信息, 是否继续?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning',
					// 当点击确定时，执行以下代码，进行删除操作
				}).then(() => {
					// 使用axios网络请求库，进行同服务器异步通信,删除用户信息
					axios.post('http://localhost:8086/dzrg0112_springboot_vue_elementui_server/deleteUserById',Qs.stringify({"id":userId})
							// 删除请求成功后执行下面代码
					).then(function(response){
						// 打印后台传递后来的返回值信息
						console.log(response.data);
						// 弹出提示删除成功
						that.$message({
							type: 'success',
							message: '删除成功!'
						});
						// 删除成功后重新查询刷新列表
						that.doquery(that.currentPage,that.pageSize);
						// 删除操作失败打印错误信息
					}).catch(function(error){
						console.log(error)
					})
					// 点击取消按钮执行下面代码
				}).catch(() => {
					this.$message({
						type: 'info',
						message: '已取消删除'
					});
				});



			},
			// 处理显示列表左侧多选框的方法，val对象中保存的是table中每一行的数据对象
			handleSelectionChange:function(val) {
				// this.multipleSelection = val;
				for (var i = 0; i < val.length; i++) {
					// 取出当前行的数据对象
					var row=val[i];
					// 将当前行的主键值存储在多选数组中
					this.multipleSelection[i]=row.id;
					console.log(this.multipleSelection)
				}
				// console.log(val)
			},
			// 新增或编辑数据保存方法
			saveUserInfo:function(formName){
				var that =this;
				console.log(this.$refs[formName])
				this.$refs[formName].validate((valid) => {
					if (valid) {
						// 通过验证，进行表单提交处理
						let req_data=Qs.stringify(this.editFromData);
						// 使用axios网络请求库，进行同服务器异步通信,查询用户信息
						axios.post('http://localhost:8086/dzrg0112_springboot_vue_elementui_server/addOrUpdateUser',req_data).then(function(response){

							that.doquery(that.currentPage,that.pageSize);
							that.dialogVisible=false;
						}).catch(function(error){
							console.log(error)
						})




					} else {
						// 验证不通过，进行信息提示处理
						console.log('error submit!!');
						that.$message.error('提交表单验证非法');
						return false;//return false 组织表单提交
					}
				});


				// 将当前的this对象保存起来，方便之后进行使用



			}  ,
			// 弹出对话框关闭处理事件
			handleClose:function(){
				this.$confirm('确认关闭？')
						.then(_ => {
							this.dialogVisible=false;
							console.log(this.dialogVisible)
							done();
						})
						.catch(_ => {});
			},
			// 使用pagehelper的分页处理事件
			// 每页页面大小发生变化时，事件的处理
			handleSizeChange:function(currentSize){
				console.log("触发了handleSizeChange事件")
				console.log(currentSize)
				// 调用查询方法
				// 重新查询后台数据库，进行分页数据的重新绑定
				this.doquery(this.currentPage,currentSize);

			},
			// 页码发生变化时的事件处理
			handleCurrentChange:function(index){
				console.log("触发了handleCurrentChange事件")
				console.log(index)
				// 调用查询方法
				// 重新查询后台数据库，进行分页数据的重新绑定
				this.doquery(index,this.pageSize);

			}




		}



	})



</script>
</body>
</html>
